<template>
    <div>
      <el-card>
        <div class="header-container">
          <span class="header-title">科室管理</span>
          <el-button type="primary" @click="showAddDialog">
            <i class="el-icon-plus"></i> 添加科室
          </el-button>
        </div>
  
        <el-table :data="departments" style="width: 100%" border>
          <el-table-column label="科室ID" prop="id"></el-table-column>
          <el-table-column label="科室名称" prop="name"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="editDepartment(scope.row)">
                <i class="el-icon-edit"></i> 编辑
              </el-button>
              <el-button type="text" @click="deleteDepartment(scope.row.id)">
                <i class="el-icon-delete"></i> 删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- Add/Edit Dialog -->
        <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
          <el-form :model="currentDepartment" label-width="80px">
            <el-form-item label="科室名称" prop="name">
              <el-input v-model="currentDepartment.name"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveDepartment">
              {{ currentDepartment.id ? '确认更新' : '确认添加' }}
            </el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </template>
  
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        departments: [], // Array to store department data
        currentDepartment: {},
        dialogVisible: false,
        dialogTitle: '',
      };
    },
    mounted() {
      // Fetch department data from the backend when the component is mounted
      this.fetchDepartments();
    },
    methods: {
      fetchDepartments() {
        // Make an API request to fetch department data
        // Example using axios, you may need to install it: npm install axios
        axios.get('http://127.0.0.1:3000/api/departments')
          .then(response => {
            this.departments = response.data;
          })
          .catch(error => {
            console.error('Error fetching departments:', error);
          });
      },
      showAddDialog() {
        this.currentDepartment = {};
        this.dialogTitle = '添加科室';
        this.dialogVisible = true;
      },
      editDepartment(department) {
        this.currentDepartment = { ...department };
        this.dialogTitle = '编辑科室';
        this.dialogVisible = true;
      },
      saveDepartment() {
        if (this.currentDepartment.id) {
          // Update existing department
          axios.put(`http://127.0.0.1:3000/api/departments/${this.currentDepartment.id}`, this.currentDepartment)
            .then(() => {
              this.fetchDepartments(); // Fetch updated data after successful update
              this.$message.success('科室更新成功');
            })
            .catch(error => {
              console.error('Error updating department:', error);
              this.$message.error('科室更新失败');
            });
        } else {
          // Add new department
          axios.post('http://127.0.0.1:3000/api/departments', this.currentDepartment)
            .then(() => {
              this.fetchDepartments(); // Fetch updated data after successful addition
              this.$message.success('科室添加成功');
            })
            .catch(error => {
              console.error('Error adding department:', error);
              this.$message.error('科室添加失败');
            });
        }
  
        this.dialogVisible = false;
      },
      deleteDepartment(departmentId) {
        // Delete department
        axios.delete(`http://127.0.0.1:3000/api/departments/${departmentId}`)
          .then(() => {
            this.fetchDepartments(); // Fetch updated data after successful deletion
            this.$message.success('科室删除成功');
          })
          .catch(error => {
            console.error('Error deleting department:', error);
            this.$message.error('科室删除失败');
          });
      },
    },
  };
  </script>
  
  <style scoped>
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .header-title {
    font-size: 18px;
    font-weight: bold;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  
  /* Optional: Style for the table rows on hover */
  .el-table .el-table__row:hover {
    background-color: #f5f7fa;
  }
  </style>
  